<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@include file="../../mytags.jsp" %>
<t:base type="jquery"></t:base>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>巡检服务</title>
</head>
<body>

<script type="text/jTemplate" id="appointTemplate">
    {#foreach $T as item}
    <li class="mui-table-view-cell we">
        <h2>服务申请号-{$T.item.appNo}<span style="color: #0eb972;background: none;width:40px;">{$T.item.statusText}</span></h2>
        <a class="mui-navigate-right set_im" href="inspectionWx.do?goAppointDetail&appointId={$T.item.id}">
            <div class="inrr">
                <h4><span>预约时间</span>{$T.item.createDate}&nbsp;</h4>
                <h4><span>联系人</span>{$T.item.contactName}&nbsp;</h4>
                <h4><span>联系电话</span>{$T.item.phone}&nbsp;</h4>
            </div>
        </a>
    </li>
    {/#for}
</script>
<%--<div id="demo1" class="mui-progressbar mui-progressbar-infinite" style="display: none">
    <span></span>
</div>--%>
<script type="text/javascript" charset="utf-8">
    mui.init();

    function initAppointList(searchContent) {
        $.getJSON("inspectionWx.do?getAppointment", {searchContent: searchContent}, function (data) {
            if (!$.isEmptyObject(data)) {
                $("#appointUl").setTemplate($("#appointTemplate").html()).processTemplate(data);
            } else {
                $("#appointUl").empty();
            }
//            mui("#demo1").progressbar().hide();
        })
    }

    function query(flag) {
//        mui("#demo1").progressbar().show();
        var searchContent = $("#searchInput").val();
        if ($.isEmptyObject(flag)) {
            flag = $(".mui-active").attr("href").substr(1);
        }
        if (flag == 'appoint') {
            initAppointList(searchContent);
        } else {
            $("#xjdUl").empty();
            $.getJSON("inspectionWx.do?search", {
                content: searchContent,
                type: 'xjd'
            }, function (data) {
//                mui("#demo1").progressbar().hide();
                if (data.length > 0) {
                    $.each(data, function (idx, itm) {
                        var li = $("<li class='mui-table-view-cell we'/>");
                        var strHtml =  '<h2>设备序列号-' + itm.sn +
                                '<span style="color: #0eb972;background: none;width:70px;">' + itm.planStateText + '</span></h2>' +
                                '<a class="mui-navigate-right set_im" href="inspectionWx.do?goInspectionDetail&id=' + itm.id + '">'+
                                '<div class="inrr"> ' +
                                '<h4><span style="width: 90px;">机型</span>' + itm.typeDesc + '</h4>' +
                                '<h4><span style="width: 90px;">厅号</span>' + ($.isEmptyObject(itm.roomNum) ? '&nbsp;' : itm.roomNum) + '</h4>' +
                                '<h4><span style="width: 90px;">计划巡检时间</span>' + itm.ipPlanDate + '</h4>';
						if(itm.planStateText == '已预约'){
							 strHtml += '<h4><span style="width: 90px;">预约上门时间</span>' + itm.ipPlanDate + '</h4>';
						}
                        if (!$.isEmptyObject(itm.endTime)) {
                            strHtml += '<h4><span style="width: 90px;font-size: 14px;">巡检完成时间</span><span style="text-align:left;color:#000000;font-size: 14px;">' + itm.planDate + '</span>';
                            /*if(itm.canEval == '1'){
                             strHtml +='<a class="jid" href="inspectionWx.do?goInspectionEvaluate&inspectionId='+itm.id+'">评价</a>';
                             }*/
                            if (itm.evaluate != '') {
                                strHtml += '<a class="jid" href="inspectionWx.do?evaluate&id=' + itm.evaluate + '">查看评价</a>';
                            }
                            strHtml += "</h4>";
                        }
                        strHtml += '</div></a>';
                        if(itm.planStateText == '巡检准备中'){
	                        strHtml += '<div style="float: left;color: #cc4b4b;width: 100%;text-align: center;">巡检工程师会在巡检实施前一个月与您联系</div>';
                        }
                        li.html(strHtml);
                        $("#xjdUl").append(li);
                    })
                } else {
                    $("#xjdUl").empty();
                }
            })
        }
    }
    $(function () {
        $("#searchInput").val('');
        $("#a_seach").click(function () {
            query();
        });

        initAppointList();
        $(".mui-control-item").on("tap", function () {
            $("#searchInput").val('');
            query($(this).attr("href").substr(1));
//            setTimeout(query,500)
        })

    })
</script>
<div class="mui-content" style="background: none; margin-top: 0px; width: 100%;">
    <div style="padding: 10px 10px; background: #fff;">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#appoint">
                我的申请
            </a>
            <a class="mui-control-item" href="#xjd">
                我的巡检
            </a>
        </div>
        <div class="mui-content"
             style="margin-top: 10px; width: 100%; background: #fff; padding: 15px;border-radius:0;">
            <form id='login-form' class="mui-input-group" action="javascript:query();">
                <div class="mui-input-row mui-input-row1" style="height: 40px;padding-left: 5px;">
                    <input type="text" class="mui-input" placeholder="请输入设备序列号查询" id="searchInput" style="width:80%;"
                           value="">
                    <label style="float: right; width: 50px;text-align: left;padding-top:10px;" id="a_seach"><a><img
                            src="${webRoot}/images/sach.png" style="width: 25px;"></a> </label>
                </div>
            </form>
        </div>
        <div class="mui-clearfix"></div>
    </div>
    <div id="appoint" class="mui-control-content mui-active">
        <div class="mui-content" style="margin-top: 0px; width: 100%;">

            <div class="mui-content" style="width: 100%;margin-top: 0px; border-radius: 0; background: none;">
                <div class="mui-card eq1" style="margin: 0;box-shadow:none; background: none;">
                    <ul class="mui-table-view eeq" id="appointUl">

                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div id="xjd" class="mui-control-content">
        <div class="mui-content" style="margin-top: 0px; width: 100%;">
            <div class="mui-content" style="width: 100%;margin-top: 0px; border-radius: 0; background: none;">
                <div class="mui-card eq1" style="margin: 0;box-shadow:none; background: none;">
                    <ul class="mui-table-view eeq" id="xjdUl">


                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
